import React, { useState } from 'react';

function OptionList({ options, selectedOptions, setSelectedOptions }) {
  const toggleOption = (option) => {
    if (selectedOptions.includes(option)) {
      setSelectedOptions(selectedOptions.filter((item) => item !== option));
    } else {
      setSelectedOptions([...selectedOptions, option]);
    }
  };

  return (
    <>
      <div className="grid grid-cols-3 gap-2">
        <div
          key='不限'
          onClick={() => setSelectedOptions([])}
          // className={`cursor-pointer text-center ${selectedOptions.length === 0 ? 'bg-blue-500 text-white font-bold' : 'bg-white text-black'} p-2 rounded-md`}
          className={`cursor-pointer text-center ${selectedOptions.length === 0 ? 'border-blue-500 border-[1px]' : 'border-white border-[1px]'} p-1 rounded-md`}
        >
          不限
        </div>
        {options.map((option, optionIdx) => (
          <div
            key={option.value}
            onClick={() => toggleOption(option.value)}
            className={`cursor-pointer text-center ${selectedOptions.includes(option.value) ? 'border-blue-500 border-[1px]' : 'border-white shadow-sm border-[1px]'} p-1 rounded-md`}
          >
            {option.label ? option.label : option.value}
          </div>
        ))}
      </div>
    </>
  );
}

export default OptionList;
